<template>
    <basic-container class="menu-container">
        <!-- <headers /> -->
        <div class="menu-header">
            <ArrowLeftBold @click="handleBack" width="24" height="24" style="padding-top: 4px; cursor: pointer"
                title="返回" />
            <p class="menu-title">{{ caseManagementForm.name }}</p>
        </div>
        <div class="menu-tabs">
            <el-tabs v-model="selectTab" class="demo-tabs" @tab-click="handleTabChange">
                <el-tab-pane :label="item.label" :name="item.prop" v-for="item in tabOption.column"
                    :key="item.prop"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="menu-content">
            <viewEdit class="menu-tabs-content" style="width: 90%;" v-if="selectTab === 1" />
            <electricityCase class="menu-tabs-content" style="width: 90%;" v-if="selectTab === 2" />
            <trialFile class="menu-tabs-content" style="width: 90%;" v-if="selectTab === 3" />
            <byCase class="menu-tabs-content" style="width: 90%;" v-if="selectTab === 4"
                :caseManagementForm="caseManagementForm" />
        </div>
    </basic-container>
</template>
<script setup>
import viewEdit from './viewEdit.vue';
import electricityCase from './electricityCase.vue';
import trialFile from '@/views/trial/components/trialFile.vue';
import byCase from './byCase.vue';
import { getDetail } from '@/api/casemanagement/caseManagement';
import { useStore } from 'vuex';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const crud = ref(null);
const store = useStore();
const selectTab = ref(1);
const routerQuery = ref({});
routerQuery.value = route.query;
const caseManagementForm = ref({});
const handleTabChange = tab => {
    selectTab.value = tab.props.name;
};
const initCaseManagementDetail = async id => {
    let res = await getDetail(id);
    caseManagementForm.value = res.data.data;
};
// 返回
const handleBack = () => {
    router.back()
};
onMounted(() => {
    selectTab.value = Number(route.query.selectTab);
    if (routerQuery.value.caseManagementId) {
        initCaseManagementDetail(routerQuery.value.caseManagementId);
    }
});
const tabOption = reactive({
    column: [
        {
            label: '基本信息',
            prop: 1,
        },
        {
            label: '电子病例',
            prop: 2,
        },
        {
            label: '报告资料',
            prop: 3,
        },
        {
            label: '关联业务',
            prop: 4,
        },
    ],
});
</script>
<style scoped lang="scss">
.menu-container {
    ::v-deep .basic-container__card {
        height: 100%;
    }

    ::v-deep .el-card__body {
        height: 100%;
    }

    height: 100%;
    overflow-y: hidden;
}

.menu-header {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.menu-title {
    font-size: 28px;
    margin-top: 0;
    // margin-left: 10px;
    margin-bottom: 0;
}

.menu-content {
    width: 100%;
    height: calc(100% - 120px);
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.menu-tabs-content {
    width: 70%;
    height: 100%;
}
</style>